<template>
    <div class="page" v-on:scroll="handleScroll">
        <TopBanner />
        <TopBar
            @click-left="onClickLeft"
            :background="topBarBackground"
        />
        <div v-if="hideCatTab" class="bg-white top-cat-bar">
            <CatTab :items="treasureCategory" v-model="activeIndex" class="category-tab" @change="handleCatTab"/>
        </div>
        <div class="fp-info">
            <van-swipe class="swipe" :show-indicators="swipeAttr.showIndicator">
                <van-swipe-item v-for="(item,k) in prizeInfo" v-bind:key="k">
                    <div class="swiper-item">
                        恭喜***{{item}}签到获得2张福屏券
                    </div>
                </van-swipe-item>
            </van-swipe>
            <div class="help">
                <van-image :src="img[1]" class="d-block-pk" @click="toHelp"/>
            </div>
        </div>
        <div class="my-treasure">
            <div class="wrap">
                <span>我的福屏卷：</span>
                <span class="digit">{{treasureInfo.fpCouponNum}}</span>
                <span>张</span>
            </div>
        </div>
        <div class="my-sign">
            <div class="left">
                <SignStep :options="5" :active="treasureInfo.signContinueNum"/>
                <div class="had-sign">已签到{{treasureInfo.signContinueNum}}天</div>
                <div class="tomorrow-sign">
                    <span>明日签到可获得</span>
                    <span class="text">{{treasureInfo.signTomorrowNum}}</span>
                    <span>张福屏卷</span>
                </div>
            </div>
            <div class="right">
                <div class="circle">
                    <img :src="treasureInfo.isSign === '0' ? signBtn[0] : signBtn[1]" />
                </div>
            </div>
        </div>
        <div class="reward-wrap">
            <van-icon name="volume" color="#ff5200" class="icon" size="22"/>
            <van-swipe class="swipe" :show-indicators="swipeAttr.showIndicator">
                <van-swipe-item v-for="(item,k) in treasureInfo.rewardInfo" v-bind:key="k">
                    <div class="swiper-item">{{item}}</div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="page-pad-pk ad">
            <div class="box">
                <div class="">
                    <span>全平台下单每满</span>
                    <span class="text-red-1 pd-2">2</span>
                    <span>元可得</span>
                    <span class="text-red-1 pd-2">1</span>
                    <span>张</span>
                </div>
                <div class="text-center fs-0">金额越大获券越多</div>
                <div class="btn btn-1">去下单</div>
            </div>
            <div class="box">
                <div class="">
                    <span>成功邀请</span>
                    <span class="text-red-1 pd-2">1</span>
                    <span>位朋友可得</span>
                    <span class="text-red-1 pd-2">2</span>
                    <span>张</span>
                </div>
                <div class="">邀请越多获卷越多</div>
                <div class="btn btn-2">邀请注册</div>
            </div>
        </div>
        <div class="h1 font-size-20-pk page-pad-pk">今天夺宝</div>
        <CatTab :items="treasureCategory" v-model="activeIndex" class="category-tab" @change="handleCatTab"/>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            class="page-pad-pk"
        >
            <div class="d-flex-pk justify-content-between bg-white goods-list" v-for="(item,key) in treasureGoodsList" v-bind:key="key" @click="toDetail(item)">
                <img :src="item.goodsThumb" class="thumb"/>
                <div class="right">
                    <div class="title ellipsis-2-pk" >{{item.goodsName}}</div>
                    <div class="progress font-size-11-pk">
                        <span>满</span>
                        <span>{{item.awardCouponNum}}</span>
                        <span>张券即可,开奖进度</span>
                        <span>{{progressControl(item.nowCouponNum,item.awardCouponNum)}}%</span>
                    </div>
                    <van-progress pivot-text="" color="#FF5300" :percentage="progressControl(item.nowCouponNum,item.awardCouponNum)" />
                    <div class="footer">
                        <Price :value="item.originalPrice" :prefixStyle="prefixStyle"/>
                        <div class="btn text-white">参与夺宝</div>
                    </div>
                </div>
            </div>
        </van-list>
        <NavBar />
    </div>
</template>

<script>
    import TopBar from "./topBar"
    import SignStep from "./SignStep";
    import NavBar from "./NavTab";
    import CatTab from "./CatTab";
    import { Progress } from 'vant';
    import TopBanner from "./TopBanner"
    import Price from "./Price";
    // import TabSwitch from "./TabSwitch";
    export default {
        components : {
            TopBar,SignStep,CatTab,[Progress.name]:Progress,NavBar,TopBanner,Price
        },
        data(){
            return {
                img : [
                    require("@img/treasureTop.png"),
                    require("@img/help.png"),
                ],
                signBtn:[
                    require("@img/singBgNo.png"),
                    require("@img/singBgYes.png")
                ],
                prizeInfo:[],
                topBarBackground:"transparent",
                hideCatTab:false,
                treasureInfo:{},
                swipeAttr:{
                    showIndicator:false,
                },
                tabsAttr:{
                    background:"transparent"
                },
                treasureCategory:[],
                activeIndex : 0,
                treasureGoodsCategoryId : 0,
                loading:true,
                finished:true,
                page:0,
                pages:2,
                size:this.$global.size,
                treasureGoodsList:[],
                prefixStyle:{
                    color: '#FF5300',
                    fontSize: '16px',
                    fontWeight:"bold"
                }
            }
        },
        created() {
            this.getTreasureInfo();
            this.getTreasureCategory();
            this.getPrizeInfo(2);
            window.addEventListener('scroll', () => {
                let scrollTop = document.documentElement.scrollTop ||
                    document.body.scrollTop;
                if(scrollTop > 550){
                    this.hideCatTab = true;
                }else{
                    this.hideCatTab = false;
                }
            }, true);
        },
        methods:{
            getPrizeInfo(lenght){
                let len = lenght || 8;
                let $chars = '青丝依琯此情可待成时光荒凉追忆旧知己怦然心动你若安好，便是晴天十里平湖霜满天长欢.*23456789';
                let maxPos = $chars.length;
                let str = '';

                for (let n = 0; n < 10; n++) {
                    str = '';
                    for (let i = 0; i < len; i++) {
                        str +=  $chars.charAt(Math.floor(Math.random() * maxPos));
                    }
                    this.prizeInfo.push(str);
                }
            },
            /**
             * 获取夺宝首页详情
             * @variation treasureInfo 数据
             */
            async getTreasureInfo() {
                await this.$api.getTreasureInfo({}).then(res => {
                    if(res.data.code === "E000001"){
                        return false;
                    }
                    this.treasureInfo = res.data.data;
                    if(this.treasureInfo.isSign === '1'){
                        this.isSign = true;
                    }
                    localStorage.setItem("treasureInfo",JSON.stringify(res.data.data));
                });
            },
            async getTreasureCategory(){
                await this.$api.getTreasureCategory({
                    type: 0
                }).then((res) => {
                    this.treasureCategory = res.data.data;
                    this.treasureGoodsCategoryId = res.data.data[this.activeIndex].treasureGoodsCategoryId;
                    this.loading = false;
                    this.finished = false;
                });
            },
            getTreasureGoodsList: function () {
                this.$api.getTreasureGoodsList({
                    "goodsName": this.keyword,
                    "page": ++this.page,
                    "size": this.size,
                    "treasureGoodsCategoryId": this.treasureGoodsCategoryId,
                }).then((res) => {
                    this.page = res.data.data.pageNum;
                    this.pages = res.data.data.pages;
                    if(this.page === this.pages){
                        this.finished = true;
                    }
                    this.treasureGoodsList = this.treasureGoodsList.concat(res.data.data.list);
                    this.loading = false;
                });
            },
            onLoad(){
                this.getTreasureGoodsList();
            },
            /**
             * 百分比显示条
             * @param val 要计算的阶梯（百分比）
             * @param max 总量
             */
            progressControl: function (val, max) {
                let v = parseInt(val);
                let m = parseInt(max)
                if (val === 0) {
                    return 0;
                } else {
                    let press = Math.floor((v / m) * 100);
                    if (press > 100) {
                        press = 100;
                    }
                    return press;
                }
            },
            handleCatTab(index){
                this.activeIndex = index;
                this.treasureGoodsCategoryId = this.treasureCategory[index].treasureGoodsCategoryId;
                this.page = 0;
                this.treasureGoodsList = [];
                this.getTreasureGoodsList();
            },
            toDetail(item){
                this.$router.push({
                    path : "./Detail",
                    query : {
                        id : item.activityGoodsId,
                        url:"./index"
                    }
                });
            },
            handleScroll(e){
                if(e.target.documentElement.scrollTop > 550){
                    this.topBarBackground = "#FF5300";
                }else{
                    this.topBarBackground = "transparent";
                }
            },
            onClickLeft(){
                this.$router.push({
                    path : "../index",
                });
            },
            toHelp(){
                this.$router.push({
                    path : "./help",
                    query : {
                        "url":"./index"
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "treasure";
    .top-cat-bar {
        position: fixed;        top: 48px;
        z-index: 9;
        padding-top: 10px;
    }
    .my-treasure{
        position: relative;
        margin-top: 27vh;
        text-align: center;
        .wrap{
            display: inline-block;
            background: linear-gradient(0deg, #f5f5f5, #ffffff);
            border-radius: 50rem;
            padding: 4px 16px;
            color: $orange;
            font-weight: bold;
            letter-spacing: 1px;
            font-size: 15px;
            .digit{
                color: $danger;
            }
        }
    }
    .fp-info{
        position: absolute;
        top: 52px;
        display: flex;
        justify-content: space-between;
        z-index: 1;
        width:100%;
        .swipe{
            flex: 0 0 60%;
            background: #2121217d;
            border-radius: 50rem;
            padding: 5px 20px;
            color: #F5F5F5;
            font-size: 12px;
            margin-left:15px;
            align-self: flex-start;
        }
        .help{
            width: 60px;
        }
    }
    .my-sign{
        display: flex;
        background: $white;
        position: relative;
        margin: 15px;
        padding:8px;
        border-radius: 8px;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 1px 12px 0px #FFCCBC;
        .left{
            flex: 0 0 70vw;
            .had-sign{
                margin-top: 15px;
                color:$gray-600;
                letter-spacing: 1px;
            }
            .tomorrow-sign{
                color: $gray-600;
                .text{
                    font-size: 22px;
                    color: $orange;
                    font-weight: 600;
                    margin: 0 5px;
                }
            }
        }
        .right{
            .circle{
                padding:15px 0;
                width: 50px;
                height: 50px;
                img{
                    width: 100%;
                }
            }
        }
    }
    .reward-wrap{
        display: flex;
        padding:0 15px;
        .van-swipe{
            width: 80vw;
            height: 5vw;
            margin-left: 5px;
            .van-swipe-item{
                color: $orange;
            }
        }
    }
    .ad{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .box{
            text-align: center;
            width: 39vw;
            background: #FDE9DB;
            padding: 8px 12px;
            font-size: 12px;
            color: #8F3002;
            line-height: 2.0;
            border-radius: 8px;
            .btn{
                height: 36px;
                width: 116px;
                margin: 0 auto;
                color:$white;
                font-weight: 500;
                font-size: 16px;
                line-height: 36px;
                padding:0;
            }
            .btn-1{
                background-image: url("~@img/btnToBuy.png");
                background-origin: border-box;
                background-repeat: no-repeat;
                background-size: 100%;
            }
            .btn-2{
                background: url("~@img/btnToInvite.png") no-repeat;
                background-origin: border-box;
                background-size: 100%;

            }
        }
    }
    .h1{
        font-weight: bold;
        padding: 15px;
    }
    .category-tab{
        margin-bottom: 15px;
    }
    .goods-list{
        margin-bottom: 15px;
        .thumb{
            width: 40vw;
            height: 40vw;
            flex:0 0 40vw;
            display: block;
        }
        .right{
            flex:1;
            margin:10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
                font-weight: 600;
                margin-bottom: 8px;
            }
            .progress{
                color:$gray-600;
            }
            .footer{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .price{
                    color:$orange;
                    .num{
                        font-size:16px;
                    }
                }
                .btn{
                    background:linear-gradient(-62deg,rgba(255,78,0,1) 0%,rgba(252,128,42,1) 100%);
                    border-radius:30px;
                    color:$white;
                }
            }
        }
    }



</style>
